<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <meta name="keywords" content="免费在线条码生成器 在线条码生成 在线 条码 生成 快速 条码生成 快速生成 生成器 在线条码生成器 lifanko">
    <meta name="description" content="一款免费的在线Code128条码生成器，输入条码内容即可生成条形码，简单快速的Code128条形码生成器">
    <link rel="icon" href="https://cdn.lifanko.cn/ico/favicon.ico" type="image/x-icon">
    <title>免费在线条码生成器 - lifankohome</title>
    <style>
        body {
            min-width: 335px;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 .5pc;
            background-image: linear-gradient(135deg, #FFF720 10%, #3CD500 100%);
        }

        .container {
            padding: 1pc 1pc 0;
            background-image: linear-gradient(135deg, #EEAD92 10%, #6018DC 100%);
        }

        #slider::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: #f5f5f5;
        }

        #slider::-webkit-scrollbar-track {
            border-radius: 0;
            background-color: #555;
        }

        #slider::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #ffffff;
        }

        input {
            outline: none;
            border: 1px solid #FFF;
            width: 150px;
            text-align: center;
            padding: 5px 10px;
        }

        select {
            padding: 5px 10px;
        }

        li {
            margin-top: 5px;
            padding-bottom: 5px;
            border-bottom: 1px dotted #999;
        }

        li span {
            text-align: right;
            width: 5.5pc;
            display: inline-block;
        }

        button {
            padding: 3px 30px;
        }

        footer {
            font-size: 12px;
            color: #161616;
        }
    </style>
</head>
<body>
<script src="js/JsBarcode.code128.min.js"></script>

<h1 style="text-align: center;color: #000">在线条码生成器<span style="font-size: 14px">(CODE128)</span></h1>
<div class="container">
    <div id="slider" style="text-align: center;max-height: 160px;overflow: scroll">
        <svg id="barcodeSVG"></svg>
        <canvas id="barcodeCanvas"></canvas>
    </div>
    <div style="margin: 1pc 0;font-weight: bold;border-bottom: 1px #777 solid;padding-bottom: .8pc">
        <p style="margin-bottom: .5pc">请输入内容：</p>
        <input id="code_value" style="width: 50%" type="text" value="LIFANKO" placeholder="Value">
        <button onclick="reset()">清空</button>
    </div>
    <div>
        <h3>条码选项：</h3>
        <ul>
            <li>
                <span>渲染模式：</span>
                <input id="" type="radio" name="code_render" placeholder="SVG" value="SVG" style="width: auto"
                       checked><label>SVG</label>
                <input type="radio" name="code_render" placeholder="Canvas" value="Canvas" style="width: auto"><label>Canvas</label>
            </li>
            <li><span>宽度：</span><input id="code_width" type="number" placeholder="Width" value="2"></li>
            <li><span>高度：</span><input id="code_height" type="number" placeholder="Height" value="100"></li>
            <li><span>显示字符：</span><input id="code_displayValue" type="checkbox" placeholder="" checked></li>
            <li><span>字符大小：</span><input id="code_fontSize" type="number" placeholder="Font Size" value="20"></li>
            <li><span>前缀字符：</span><input id="code_prefix" placeholder="Prefix Text" value=""></li>
            <li><span>后缀字符：</span><input id="code_suffix" placeholder="Suffix Text" value=""></li>
            <li><span>粗体字符：</span><input id="code_bold" type="checkbox" placeholder=""></li>
            <li><span>斜体字符：</span><input id="code_italic" type="checkbox" placeholder=""></li>
            <li><span>文字对齐：</span><select id="code_align" title="文字对齐">
                <option value="left">居左</option>
                <option value="center" selected>居中</option>
                <option value="right">居右</option>
            </select></li>
            <li><span>文字位置：</span><select id="code_position" title="文字对齐">
                <option value="top">顶部</option>
                <option value="bottom" selected>底部</option>
            </select></li>
            <li><span>文字边距：</span><input id="code_textMargin" type="number" placeholder="Text Margin" value="2"></li>
            <li>
                <button onclick="createCode()">确定</button>
            </li>
        </ul>
    </div>

</div>
<footer>
    <p style="padding-bottom: .5pc">
        &copy; 2016-2019
        <a href="https://hpu.lifanko.cn" style="color: green;text-decoration: underline">lifanko</a>
        <a href="http://www.miitbeian.gov.cn" target="_blank" style="text-decoration: underline;color: #161616">豫ICP备16040860号</a>
    </p>
</footer>

<script>
    function $(element) {
        return document.getElementById(element);
    }

    var code_render = document.getElementsByName('code_render');

    var barcodeSVG = $("barcodeSVG");
    var barcodeCanvas = $("barcodeCanvas");

    var code_value = $("code_value");
    var code_width = $("code_width");
    var code_height = $("code_height");
    var code_displayValue = $("code_displayValue");
    var code_prefix = $("code_prefix");
    var code_suffix = $("code_suffix");
    var code_bold = $("code_bold");
    var code_italic = $("code_italic");
    var code_align = $("code_align");
    var code_position = $("code_position");
    var code_textMargin = $("code_textMargin");
    var code_fontSize = $("code_fontSize");

    code_value.onkeyup = function () {
        createCode();
    };

    function reset() {
        code_value.value = '';
    }

    function createCode() {
        if (code_value.value.length > 0) {
            var obj = false;
            if (code_render[0].checked && !code_render[1].checked) {
                barcodeSVG.style.display = 'unset';
                barcodeCanvas.style.display = 'none';
                obj = "#barcodeSVG";
            } else if (!code_render[0].checked && code_render[1].checked) {
                barcodeSVG.style.display = 'none';
                barcodeCanvas.style.display = 'unset';
                obj = "#barcodeCanvas";
            } else {
                alert('请先选择渲染模式');
            }

            if (obj) {
                JsBarcode(obj, code_value.value, {
                    width: Math.ceil(code_width.value),
                    height: Math.ceil(code_height.value),
                    displayValue: code_displayValue.checked,
                    fontSize: code_fontSize.value,
                    text: code_prefix.value + code_value.value + code_suffix.value,
                    fontOptions: code_bold.checked ? (code_italic.checked ? 'bold italic' : 'bold') : (code_italic.checked ? 'italic' : ''),
                    textAlign: code_align.value,
                    textPosition: code_position.value,
                    textMargin: code_textMargin.value
                });
            }
        }
    }

    createCode();
</script>
</body>
</html>